/
<template>
  <div>
    <template v-if="table_data.length < 0">没有数据</template>
    <el-table
      v-else-if="table_data.length > 0"
      :data="table_data"
      :highlight-current-row="true"
      border
      style="width: 100%"
      max-height="700"
    >
      <el-table-column fixed prop="key" label="Key" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="img" label="图片" width="150">
        <template slot-scope="scope">
          <el-image lazy :src="scope.row.img"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="省份" width="150">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="edit_show(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" size="small" @click="del_tabledata(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <My_dialogVue
      :dialogVisible="dialogVisible"
      :handleDialogClose="handleDialogClose"
      :edit_value="edit_value"
    />
    <My_drawerVue :drawer="drawer" :handleClose="handleClose" :obj="obj" />
  </div>
</template>

<script>
import My_dialogVue from "@/components/My_dialog.vue";
import My_drawerVue from "@/components/My_drawer.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "table",
  data() {
    return {
      drawer: false,
      dialogVisible: false,
      obj: {},
      edit_value: {},
    };
  },
  components: {
    My_drawerVue,
    My_dialogVue,
  },
  computed: {
    ...mapState("table_reducer", ["table_data"]),
  },

  methods: {
    ...mapMutations("table_reducer", ["del_tabledata"]),
    edit_show(row) {
      this.edit_value = row;
      this.dialogVisible = true;
      console.log(111, this.dialogVisible);
    },
    handleClick(row) {
      this.drawer = true;
      console.log(row);
      this.obj = row;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleDialogClose(done) {
      this.dialogVisible = false;
      done();
    },
  },
};
</script>

<style>
.el-image__inner {
  width: 100px;
  height: 100px;
}
</style>
